<template>
  <div class="addKeep">
    <van-nav-bar title="录入保养单" left-arrow @click-left="goBack()">
      <van-button @click="goDeviceKeep" type="primary" slot="right" color="#62cff9">保养列表</van-button>
    </van-nav-bar>
    <div class="area">
      <van-cell-group>
        <van-field :error-message="errMsg" @input='getObscureDevice' v-model="deviceName" required="" label="设备名称" :clearable="true"></van-field>
        <van-overlay :show="showDevice" @click="showDevice = false">

          <van-cell @click='getDeviceName(item.facilityname)' v-for="(item,i) in deviceList" :key='i' :title="item.facilityname"></van-cell>
        </van-overlay>
        <van-cell title="保养类别" required="">
          <div slot="default">
            <van-dropdown-menu :border="false" :hairline="false">
              <van-dropdown-item v-model="choiceCategory" :options="categorys" />
            </van-dropdown-menu>
          </div>
        </van-cell>
        <van-field v-model="content" :clearable="true" label="保养内容" placeholder="请输入保养内容" required></van-field>

        <van-field v-model="keepCycle" :clearable="true" :error-message="cycleErrMsg" required label="保养周期(天)" placeholder="请输入保养周期"></van-field>
        <div class="anotherCell">
          <!-- <van-cell title="保养时间" :value="date" @click="showPop"></van-cell> -->
          <van-cell title="保养员" :value="userName"></van-cell>
        </div>
      </van-cell-group>
      <div class="btn">
        <van-button color="#62cff9" type="default" size="large" @click="saveSuccess">保存</van-button>
      </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker @confirm="closePop" v-model="currentDate" type="date" />
    </van-popup>
  </div>
</template>

<script>
  let moment = require("moment");
  import {
    Toast
  } from "vant";
  export default {
    data() {
      return {
        errMsg:'',
        showDevice: false,
        deviceList: [],
        area: '',
        areas: [],
        currentDate: new Date(),
        cycleErrMsg:'',
        show: false,
        choiceDeviceName: 0, //选择设备名称
        deviceNames: [],
        choiceCategory: 0, //选择设备类别
        categorys: [],
        keepDepart: "", //保养员部门
        keepMan: "", //保养员姓名

        deviceName: "", //设备名称
        num: "", //设备编号
        keepCycle: "", //周期,
        date: "请输入计划保养时间", //计划保养时间
        person: "", //保养员
        content: "", //设备内容
        //belong:'',//设备所属
        userName: '',

        radio: null,
        depart: "", //所属部门

        activeDepartIndex: null, //点击的部门索引
        area: "", //所属地区

        keepContent: "" ,//保养内容
        allDevcieList:[]
      };
    },
    created() {
      var h = JSON.parse(localStorage.cksLoginInfo);
      this.userName = h.userName;
      this.getCategoty();
    },
    watch: {
      keepCycle(newVal){
        if((/[^0-9]/).test(newVal)){
          this.cycleErrMsg = '请输入整数'

        }else{

          this.cycleErrMsg = ''
        }
      },
      deviceName(newVal) {

      },
    },
    methods: {
      //匹配设备名称
      matchDeviceName(){
        if(this.deviceList.length === 0){
          return this.errMsg = '请输入正确的设备名称'
        }else{
          this.showDevice = true
          this.errMsg = ''
          this.deviceList.some(item=>{
               if(item.facilityname == this.deviceName){
                 this.errMsg = ''
                 return true
               }else{
                  this.errMsg = '请输入正确的设备名称'
               }
             })
          }
      },
      //模糊查询获得设备列表
      getObscureDevice() {
        this.$axios.post('/Maintenance/obscureFacility.do', {
          facilityName: this.deviceName
        }).then(res => {
          if (res.data.status === 200) {
            this.deviceList = res.data.msg
            this.matchDeviceName()
            }

        })
      },
      //根据输入的设备名字获得具体的设备名称
      getDeviceName(name) {
        this.deviceName = name
        this.matchDeviceName()
      },
      closePop() {
        this.show = false;
        let newDate = moment(this.currentDate).format("YYYY-MM-DD");

        this.date = newDate;
      },
      // showPop() {
      //   this.show = true;
      // },
      getFacility() {
        if (!this.num) return
        this.$axios.post("Facility/selectFacility.do", {
          id: this.num
        }).then(res => {
          if (res.data.status === 200) {
            this.deviceName = res.data.msg[0].facilityname
          }
        })
      },
      getCategoty() {
        this.$axios.post("Repair/selectGenre.do").then(res => {
          if (res.data.status === 200) {
            let facility = res.data.msg;
            let arrs = [];
            facility.map((value, index) => {
              arrs.push({
                text: value.name,
                value: value.id
              });
              this.categorys = arrs;
            });
          }
        });
      },
      saveSuccess() {
        if(this.errMsg||this.cycleErrMsg) return
        if (
          this.deviceName &&
          this.choiceCategory &&
          this.content &&
          this.keepCycle
        ) {
          this.$axios.post("Repair/addRepair.do", {
            curcontent: this.content,
            cycle: this.keepCycle,
            genreid: this.choiceCategory,
            /* planrepairtime: this.date, */
            repairuserid: this.userName,
            rfacilityid: this.deviceName,
          }).then(res => {
            if (res.data.status == 200) {
              Toast.success("添加成功！")
            }
          })
        } else {
          Toast.fail("请输入完整信息");
        }
      },
      goDeviceKeep() {
        this.$router.push({
          name: "deviceKeep",
          params: {
            display: true
          }
        });
      }
    }
  };
</script>

<style scoped="scoped">
  .van-overlay {
    top: 6rem;
  }

  .anotherCell .van-cell__title {
    flex: 1.1;
  }

  .van-cell__value {
    flex: 2.5;
    text-align: left;
  }

  .van-button {
    border-radius: 7px;
    height: 1.8rem;
    line-height: 1.8rem;
    font-size: 0.8rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .van-button--large {
    height: 2.3rem;
    line-height: 2.3rem;
  }

  .btn {
    padding: 0.8rem;
  }

  .upImg {
    vertical-align: middle;
  }

  .activeDepart {
    color: #17abe3;
  }

  .area {
    overflow: scroll;
  }

  .popupTitile {
    font-size: 0.87rem;
    text-align: center;
    margin: 0;
    margin-top: 0.5rem;
  }

  .van-popup--center {
    top: 40%;
    border-radius: 8px;
    width: 76%;
    padding-bottom: 30px;
  }

  .belogContainer {
    padding: 1rem 3rem;

    display: flex;
    justify-content: space-between;
  }

  .depart,
  .bglog-area {
    font-size: 0.86rem;
    color: #333333;
  }

  .depart li,
  .bglog-area li {
    padding: 0.7rem;
  }

  .departTitle {
    text-align: center;
  }

  .van-cell__value {
    text-align: left;
  }

  .van-dropdown-menu {
    height: 1.25rem;
    line-height: 1.25rem;
  }
</style>
